<template>
    <div class="Cinema">
        <ul>
            <li
                v-for='item in cinemaList'
                :key="newSymbol(item.cinemaId)"
                @click="gotoPage(item.cinemaId)">
                <!-- 电影院名字 -->
                <div class="cinemaNm shortTxt">
                    {{item.title}} 
                    <span>{{item.price.n}} {{item.price.q}}</span>
                </div>
                <!-- 电影院地址 -->
                <div class="cinema-loc shortTxt">
                    {{item.location}}
                </div>
                <!-- 电影院的服务 -->
                <div class="cinema-serive shortTxt">
                    <span
                        v-for="item2 in item.services"
                        :key="newSymbol(item2.text)"
                        :class="item2.code">
                        {{item2.text}}
                    </span>
                </div>
                <!-- 电影院活动 -->
                <div class="cinema-discount shortTxt"
                    v-if="item.discount!=undefined&&item.discount.length>0">
                    <img src="@/assets/img/card.png" alt="">
                    {{item.discount[0].text}}
                </div>
            </li>
            <!-- 加载动画 -->
            <li
                v-show="isLoading&&!noMoreData"
                class="loading-ani">
                <com-loading></com-loading>
            </li>
            <li
                v-show="noMoreData"
                class="no-more-cinema">
                暂无更多电影院信息
            </li>
        </ul>
    </div>
</template>

<script>
import comLoading from '@/components/comLoading.vue'
export default {
    name: 'Cinema',
    data() {
        return {
            cinemaList: [], // 电影院列表
            isLoading: false, // 正在加载
            noMoreData: false, // 无更多数据
        }
    },
    components: {
        comLoading,
    },
    methods: {
        // 加载新的电影院
        loadCinema() {
            if(this.isLoading == true) {
                return;
            }
            this.isLoading = true;
            var date = new Date();
            var dateString = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
            this.axios
                .get('https://apis.netstart.cn/maoyan/index/moreCinemas?day='+dateString+'&cityId=20&offset='+this.cinemaList.length)
                .then((success)=>{
                    // console.log(success);
                    // if(this.cinemaList.length > 20){
                    //     success = [];
                    // }
                    if(success==undefined || success.length == 0){
                        this.noMoreData = true;
                        this.delMyScroll();
                    }
                    this.cinemaList = this.cinemaList.concat(success);
                    // console.log(this.cinemaList[0].discount[0].card);
                    this.isLoading = false;
                }) 
                .catch((err)=>{
                    console.log(err);
                })
        },
        newSymbol() {
            var l = Symbol();
            return l;
        },
        // 去电影院详情页
        gotoPage(cid) {
            this.$router.push('/cinema_detail/'+cid+'/required/');
        },
        // 我的滚动逻辑
        myOnScroll() {
            //变量scrollTop是滚动条滚动时,距离顶部的距离
            let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            //变量windowHeight是可视区的高度
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            if( scrollHeight - (scrollTop+windowHeight) < 200 ){
                //写后台加载数据的函数
                this.loadCinema();
                console.log('Scroll gogo');
            }
        },
        // 初始化我的轮动事件
        myInitScroll() {
            window.addEventListener('scroll',this.myOnScroll);
        },
        // 删除我的滚动事件
        delMyScroll() {
            window.removeEventListener('scroll',this.myOnScroll);
        }
    },
    mounted() {
        this.loadCinema();
        this.myInitScroll();
    },
    destroyed() {
        this.delMyScroll();
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
li {
    overflow: hidden;
    padding: 20px 0px;
    margin: 0 15px;
    border-bottom: 1px solid #888;
    margin-bottom: -1px;
    &>div {
        width: 100%;
    }
}
.cinemaNm {
    font-size: 18px;
    font-weight: bold;
    span {
        margin-left: 10px;
        color: #F03D43;
    }
}
.cinema-loc,
.cinema-serive,
.cinema-discount {
    font-size: 14px;
    color: #888;
    margin-top: 8px;
}
.cinema-discount {
    position: relative;
    padding-left: 18px;
    img {
        width: 14px;
        height: 14px;
        position: absolute;
        top:50%;
        left: 0px;
        margin-top: -7px;
    }
}
.cinema-serive {
    span {
        font-size: 12px;
        display: inline-block;
        padding: 0px 3px;
        margin-right: 4px;
        border: 1px solid #888;
        border-radius: 3px;
    }
    .hallType,
    .endorse {
        color: #589DAF;
        border-color: #589DAF;
    }
    .snack,
    .vipTag {
        color: #FF9900;
        border-color: #FF9900;
    }
}
.loading-ani {
    height: 100px;
}
.no-more-cinema {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
}
</style>